<template>
	<view>
		<!-- <view class="detail-item" v-if="ticketDetail['报事附件']">
			<text class="left">报事附件：</text>
			<view v-if="imgLength !== 3" style="margin-top: 20rpx;display: flex;">
				<view class="img-item" style="margin-right: 20rpx;" v-if="file[0].fileData">
					<van-image @click="previewImage(0)" fit="cover" width="110" height="110" :src="file[0].fileData" />
				</view>
				<view  class="img-item" v-if="file[1].fileData">
					<van-image @click="previewImage(1)" fit="cover" width="110" height="110" :src="file[1].fileData" />
				</view>
			</view>
		</view> -->
		<view class="detail-img">
			<view class="img-item" v-if="file[0].fileData">
				<van-image @click="previewImage(0)" fit="cover" width="100" height="100" :src="file[0].fileData" />
			</view>
			<view class="img-item" v-if="file[1].fileData">
				<van-image @click="previewImage(1)" fit="cover" width="100" height="100" :src="file[1].fileData" />
			</view>
			<view class="img-item" v-if="file[2].fileData">
				<van-image @click="previewImage(2)" fit="cover" width="100" height="100" :src="file[2].fileData" />
			</view>
		</view>
	</view>
</template>

<script>
	import vanImage from '@/wxcomponents/vant/dist/image'
	export default {
		components: {
			vanImage
		},
		props: {
			file: {
				type: Object
			}
		},
		data() {
			return {

			};
		},
		methods: {
			previewImage(index) {
				// console.log(index)
				let previewList = []
				if (this.file[0]) {
					previewList.push(this.file[0].fileData)
				}
				if (this.file[1]) {
					previewList.push(this.file[1].fileData)
				}
				if (this.file[2]) {
					previewList.push(this.file[2].fileData)
				}
				this.previewImg(previewList, index)
			},
			previewImg(url, index) {
				uni.previewImage({
					urls: url,
					current: index,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail-img {
		background-color: #fff;
		padding-left: 0;
		display: flex;
		.img-item {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
